<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style>
		table{ border:0;border-collapse:collapse;}
		td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
		th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;}
		.parent{ background:#FFF38F;cursor:pointer;}  /* 偶数行样式*/
		.odd{ background:#FFFFEE;}  /* 奇数行样式*/
		.selected{ background:#FF6500;color:#fff;}
	</style>
	<!--   引入jQuery -->
	<script src="../dist/js/jquery-3.1.1.min.js" type="text/javascript"></script>
	
</head>
<body>
	<table>
		<thead>
			<tr><th>权限</th><th>类型</th><th>字符串</th><th>路径</th></tr>
		</thead>
		<tbody>
			<tr class="parent" id="1"  ><td>模块1</td><td><button>添加</button></td><td><button>删除</button></td><td><button>修改</button></td></tr>
			<tr class="child_1" style="display:none"><td>1</td><td>2</td><td>3</td><td>4</td></tr>
			<tr class="child_1" style="display:none"><td>李四</td><td>女</td><td>哦豁</td><td>奥拉奥拉奥拉</td></tr>
			<tr class="parent" id="2"><td colspan="4">模块2</td></tr>
			<tr class="child_2"><td>王五</td><td>男</td><td>湖南长沙</td><td>木大木大木大</td></tr>
			<tr class="child_2"><td>找六</td><td>男</td><td>浙江温州</td><td>浙江宁波</td></tr>
			<tr class="parent" id="3"><td colspan="4">后台开发组</td></tr>
			<tr class="child_3"><td>Rain</td><td>男</td><td>浙江杭州</td><td>浙江宁波</td></tr>
			<tr class="child_3"><td>MAXMAN</td><td>女</td><td>浙江杭州</td><td>浙江宁波</td></tr>
		</tbody>
	</table>
	
	<script type="text/javascript">
	$(function(){
		$('tr.parent').click(function(){   // 获取所谓的父行
		$(this)
			.toggleClass("selected")   // 添加/删除高亮
			.siblings('.child_'+this.id).toggle();  // 隐藏/显示所谓的子行
			});
		})
		
	</script>
</body>
</html>